<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
	<meta name="author" content="上海市共进医疗">

	<title>治疗师排班一览表</title>

	<link rel="stylesheet" href="/css/bootstrap.min.css">
	<link rel="stylesheet" href="/js/plugins/jquery-ui/jquery-ui.css"/>
	<link href="/css/plugins/datapicker/datepicker3.css" rel="stylesheet"/>
	<link rel="stylesheet" href="/css/echart.css">
    <style>
		.echart {
			height: 350px;
			background-color: #cccccc;
			margin-bottom: 2em;
		}
		.echart-container {
			margin-top: 3em;
			margin-bottom: 3em;
		}
		#detail-item {
			margin-top: 2em;
		}
		.detail-item {
			margin-bottom: 1.5em;
		}
		.detail-item>div {
			height: 4em;
			padding-top: .5em;
			padding-bottom: .5em;
			border:2px solid #797979;
			border-radius:5em;
		}
		.detail-item>div>p {
			padding:0;
			margin:0;
			height: 1.5em;
			line-height: 1.5em;
		}
		.detail-item .detail-item-name {
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
		#total {
			margin-right: 2em;
		}
		#statistics-table th,
		#statistics-table td {
			text-align: center;
			vertical-align: middle;
		}
    </style>
</head>
<body>
	<div class="input-daterange input-group col-md-6">
		<input type="text" class="form-control m-b start_time" id="start_time" data-date-end-date="0d" readonly="readonly"
			   style="background: white">
		<span class="input-group-addon">到</span>
		<input type="text" class="form-control m-b end_time" id="end_time" data-date-end-date="+1d" readonly="readonly"
			   style="background: white">
	</div>

	<div class="echart-container row">
		<div class="col-sm-12">整体趋势</div>
		<div class="col-sm-12">
			<div id="echart1" class="echart col-md-6"></div>
			<div id="echart2" class="echart col-md-6"></div>
			<div id="echart3" class="echart col-md-6"></div>
			<div id="echart4" class="echart col-md-6"></div>
		</div>
	</div>

	<div class="row">
		<div class="col-md-2">
			<label style="line-height: 34px">按治疗组 : </label>
		</div>
		<div class="col-md-2">
			<select id="group-select" class="form-control">
				<!-- <option value="1">物理治疗组</option>
				<option value="2">作业治疗组</option>
				<option value="3">语言治疗组</option>
				<option value="4">理疗治疗组</option>
				<option value="5">儿童治疗组</option> -->
			</select>
		</div>
		<div class="col-sm-12">
			<table id="statistics-table" class="table table-bordered">
				<thead>
				<tr class="active">
					<th>治疗师</th>
					<th>患者总数</th>
					<th>新增患者数</th>
					<th>康复评估</th>
					<th>康复训练</th>
				</tr>
				</thead>
				<tbody></tbody>
			</table>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<label>收款明细 : </label>
			<span id="total-cost"></span>
		</div>
	</div>
	<div class="row">
		<div id="count-btn-container" class="col-sm-12">
			<button data-type="2" class="btn btn-primary btn-xs">训练明细</button>
			<button data-type="1" class="btn btn-xs">评估明细</button>
		</div>
		<div id="detail-item" class="col-sm-12">

		</div>
		<div class="text-right">
			<label>共计 : <span id="total"></span></label>
		</div>
	</div>


	<div id="detail-modal" class="detail-item col-md-3 col-lg-2 hide">
		<div class="text-center">
			<p class="detail-item-name"></p>
			<p class="detail-item-cost"></p>
		</div>
	</div>

<script src="/js/plugins/datapicker/bootstrap-datepicker.zh-CN.js"></script>
<script src="/js/echarts.min.js"></script>
<script>
    itemType = 1;
    //初始化日期控件
    var day = new Date();
    day.setMonth(day.getMonth()-1);
    //初始时间段为向后一个月
    $(".start_time").val(day.format("yyyy-MM-dd"));
    $(".end_time").val(new Date().format("yyyy-MM-dd"));
    $(".input-daterange input").datepicker({
        format: "yyyy-mm-dd",
        todayBtn: "linked",
        startDate:"2017-01-01",
        keyboardNavigation: false,
        forceParse: false,
        autoclose: true,
        language: "zh-CN"
    });
    
    mandy_get_treatment_group_syn(function(data){
        $("#group-select").empty();
        var lists = data.treat_groups;
        $.each(lists,function(idx,list){
            var option = $("<option value = '" + list.id + "'>" +list.name + "</option>");
            $("#group-select").append(option);
		})
	})

    var groupId = $("#group-select option:selected").val();
    var startTime = moment($("#start_time").val()).valueOf();
    var endTime = moment($("#end_time").val()).valueOf();
	var type = 2;

    var option1 = {},
    	option2 = {},
    	option3 = {},
    	option4 = {};

	var tbody = $("#statistics-table tbody");

	$(".input-daterange input").on("change",function(){
        startTime = moment($("#start_time").val()).valueOf();
        endTime = moment($("#end_time").val()).valueOf();
        countPie(startTime,endTime);
        countNum(groupId,startTime,endTime)
        countCost(groupId,startTime,endTime,type);

	})

	$("#group-select").on("change",function(){
        groupId = $(this).val();
        countNum(groupId,startTime,endTime)
        countCost(groupId,startTime,endTime,type);
	})

	$("#count-btn-container button").on("click",function(){
	    type = $(this).data("type");
	    $(this).addClass("btn-primary").siblings().removeClass("btn-primary");
        countCost(groupId,startTime,endTime,type);
	})


	//饼图统计
	function countPie(startTime,endTime){
        mandy_statistics_patient_prescription_by_group(startTime,endTime,function(data){
            console.log("++++++++++饼图++++++++++")
            console.log(data)
            console.log("++++++++++饼图++++++++++")
			var n1 = data.map.sumPatients.name;
            var c1 = getColorArray(n1,colorArr);
			var val1 = data.map.sumPatients.value;
			var i;
			var v1 = [];
			for (i = 0;i < n1.length;i++){
			    v1[i] = {};
			    v1[i].value = val1[i];
			    v1[i].name = n1[i];
			}
			var sumPatients_value = 0;
			$.each(val1,function(idx1,value1){
                sumPatients_value += Number(value1);
			})
			var n2 = data.map.newPatients.name;
			var c2 = getColorArray(n2,colorArr);
			var val2 = data.map.newPatients.value;
            var j;
            var v2 = [];
            for (j = 0;j < n2.length;j++){
                v2[j] = {};
                v2[j].value = val2[j];
                v2[j].name = n2[j];
            }
            var newPatients_value = 0;
            $.each(val2,function(idx2,value2){
                newPatients_value += Number(value2);
            })
			var n3 = data.map.assess.name;
            var c3 = getColorArray(n3,colorArr);
			var val3 = data.map.assess.value;
            var k;
            var v3 = [];
            for (k = 0;k < n2.length;k++){
                v3[k] = {};
                v3[k].value = val3[k];
                v3[k].name = n3[k];
            }
            var assess_value = 0;
            $.each(val3,function(idx3,value3){
                assess_value += Number(value3);
            })
			var n4 = data.map.trains.name;
            var c4 = getColorArray(n4,colorArr);
			var val4 = data.map.trains.value;
            var l;
            var v4 = [];
            for (l = 0;l < n2.length;l++){
                v4[l] = {};
                v4[l].value = val4[l];
                v4[l].name = n4[l];
            }
            var trains_value = 0;
            $.each(val4,function(idx4,value4){
                trains_value += Number(value4);
            })

            option1 = setOption(n1,v1,c1);
            option1.title.subtext = "患者总数 : " + sumPatients_value + "人";
            option2 = setOption(n2,v2,c2);
            option2.title.subtext = "新增患者数 : " + newPatients_value + "人";
            option3 = setOption(n3,v3,c3);
            option3.title.subtext = "康复评估 : " + assess_value + "人";
            option4 = setOption(n4,v4,c4);
            option4.title.subtext = "康复训练 : " + trains_value + "人";

            var echart1 = echarts.init($("#echart1")[0]);
            var echart2 = echarts.init($("#echart2")[0]);
            var echart3 = echarts.init($("#echart3")[0]);
            var echart4 = echarts.init($("#echart4")[0]);
            echart1.setOption(option1);
            echart2.setOption(option2);
            echart3.setOption(option3);
            echart4.setOption(option4);
        },function(err){
            console.log(err)
        })
    }
    countPie(startTime,endTime);

    //次数统计,列表
    function countNum(groupId,startTime,endTime){
        tbody.empty();
        mandy_statistics_patient_prescription_by_therapist(groupId,startTime,endTime,function(data){
            console.log("++++++++++列表++++++++++")
            console.log(data)
            console.log("++++++++++列表++++++++++")
            var list = data.list;
            var sum1 = 0,
                sum2 = 0,
                sum3 = 0,
                sum4 = 0;

            $.each(list,function(idx,val){
                var tr = $("<tr>"),
                    td0 = $("<td id='" + val.id + "'>" + val.therapist_name + "</td>"),
                    td1 = $("<td>" + val.sum_patients + "</td>"),
                    td2 = $("<td>" + val.new_patients + "</td>"),
                    td3 = $("<td>" + val.assess + "</td>"),
                    td4 = $("<td>" + val.trains + "</td>");

                sum1 += val.sum_patients;
                sum2 += val.new_patients;
                sum3 += val.assess;
                sum4 += val.trains;

                tr.append(td0,td1,td2,td3,td4).appendTo(tbody);
            })
            var r = $("<tr>"),
                t0 = $("<td>总计</td>"),
                t1 = $("<td>" + sum1 + "</td>"),
                t2 = $("<td>" + sum2 + "</td>"),
                t3 = $("<td>" + sum3 + "</td>"),
                t4 = $("<td>" + sum4 + "</td>");
            //r.append(t0,t1,t2,t3,t4).appendTo(tbody);
        },function(err){
            console.log(err)
        })
    }
    countNum(groupId,startTime,endTime);
    //费用统计
    function countCost(groupId,startTime,endTime,type){

        $("#detail-item").empty();
        mandy_get_group_charges_static(groupId,startTime,endTime,function(data){
            console.log("****************************")
            console.log(data)
            console.log("****************************")
            $("#total-cost").text("总费用" + data.total + "元");
            var chargesDTOs = data.chargesDTOs;
            var items_1 = "";
            var items_2 = "";
            var items = [];
            $.each(chargesDTOs,function(i,v){
                if (v.itemType == type ){
                    items[type] = v;
                }
            })

            $("#total").text( items[type].number + "次 / " +  items[type].fee + "元");
            $.each( items[type].chargeDetailDTOs,function(idx,val){
                var clone = $("#detail-modal").clone(true,true).attr("id","detail-item-" + idx).removeClass("hide");
                clone.find(".detail-item-name").text(val.item_name).attr("title",val.item_name);
                clone.find(".detail-item-cost").text(val.number + " 次 / " + val.fee + "元");
                $("#detail-item").append(clone);
            })
        },function(err){
            console.log(err)
        })
    }
    countCost(groupId,startTime,endTime,type);












    function setOption(n,v,c){
        var option = {
            title : {
                subtext: '患者总数',
                left:20,
                top:-20
            },
            tooltip : {
                trigger: 'item',
                confine: true,
                formatter: "{b} : {c} ({d}%)"
            },
            legend: {
                top: 'bottom',
                itemWidth: 14,
                data: n
            },
            series : [
                {
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:v,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ],
            color : c
        };
        return option;

    }

</script>
</body>
</html>